<template>
  <div class="placeholder" v-if="topHeight"></div>
  <van-sticky>
    <header
      :class="[border_bottom ? 'border_bottom' : '']"
      :style="{ 'background-color': bgColor }"
    >
      <!-- 左侧返回箭头 -->
      <div class="left">
        <svg-load
          v-if="backTo"
          name="jiantou-z"
          class="leftImg"
          @click="$router.push(backTo)"
        ></svg-load>
        <svg-load
          v-else-if="backwardNum != -1"
          name="jiantou-z"
          class="leftImg"
          @click="$router.go(backwardNum)"
        ></svg-load>
        <svg-load v-else name="jiantou-z" class="leftImg" @click="_back()"></svg-load>
      </div>

      <!-- ✅ 默认居中标题 -->
      <div class="centerStyle">{{ currentName }}</div>
      <slot name="titleName"></slot>

      <!-- ✅ 右侧已隐藏 -->
      <div class="right"></div>
    </header>
  </van-sticky>
</template>

<script setup>
import { dispatchCustomEvent } from '@/utils'
import { useRouter } from 'vue-router'
const router = useRouter()

const props = defineProps({
  backTo: {
    type: String
  },
  backwardNum: {
    type: Number,
    default: -1
  },
  currentName: {
    type: String,
    default: ''
  },
  border_bottom: {
    type: Boolean,
    default: true
  },
  topHeight: {
    type: Boolean,
    default: true
  },
  bgColor: {
    type: String,
    default: '#fff'
  }
})

const emit = defineEmits(['linkTo', 'showPopup', 'del'])
const linkTo = () => emit('linkTo')
const showPopup = () => emit('showPopup')
const handelClick = (item) => {
  if (item == 'event_serviceChange') {
    dispatchCustomEvent('event_serviceChange')
  } else if (item == 'del') {
    emit('del')
  } else if (item) {
    router.push(item)
  } else {
    showPopup()
  }
}
</script>

<style lang="scss" scoped>
.placeholder {
  height: 61px;
}

header.border_bottom {
  border-bottom: 1px solid var(--ex-border-color);
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  max-width: var(--ex-max-width);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center; /* ✅ 居中标题 */
  padding: 0 15px;
  background-color: #fff;
  color: #000;
  z-index: 99;
  border-bottom: 1px solid #eee;

  /* ✅ 左侧返回箭头 */
  .left {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;

    .leftImg {
      width: 16px;
      height: 12px;
      margin-right: 10px;
    }
  }

  /* ✅ 默认居中标题 */
  .centerStyle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: 600;
    color: #000;
    text-align: center;
  }

  /* ✅ 隐藏右侧客服 */
  .right {
    display: none !important;
  }
}
</style>
